span<template>
  <div class="fun-route-head" @click="() => {
    $router.back()
  }">
    <span class="fun-route-title"> &#60;</span><span class="fun-route-title">趣味路线</span>
  </div>
  <div id="app" style="position: relative;top: 30px;">
    <img style="width: 100%;
    height: 120px;
    position: relative;" :src="route.query.img" alt="">
    <div id="map"></div>
  </div>
</template>
<style scoped>
#map {
  width: 100%;
  height: 350px;
}

.fun-route-head {
  position: absolute;
  top: 0;
}

.fun-route-head span {
  font-size: 18px
}
</style>

<script setup lang="ts">
import { onMounted, } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
window._AMapSecurityConfig = {
  securityJsCode: "e603532606fc29e90a674883d8e90837"
}
var hwMap: any;
var nowMark: any;
var nowLayer: any;
var siteServer: any;
onMounted(() => {
  AMapLoader.load({
    key: "8151e475e6167957f001f57b2b7d79e5",
    version: "2.0"
  }).then(AMap => {
    hwMap = new AMap.Map("map", {
      viewMode: "2d",
      zoom: 16,
      center: [115.488964, 38.814966]
    })
    //地图选点标记
    const position = new AMap.LngLat(115.488964, 38.814966)
    nowMark = new AMap.Marker({
      position,
      content: `<i style="font-size:22px; position: absolute;left:-15px;top:-20px;" class="iconfont icon-dingwei-map-copy" ></i>`,
      offset: new AMap.Pixel(0, 15)
    })
    hwMap.add(nowMark)
    //地图选点提示
    nowLayer = new AMap.Marker({
      position,
      content: `<div class="posi">莲池区南大园乡河北科技学院图书馆</div>`,
      offset: new AMap.Pixel(20, 45)
    })
    hwMap.add(nowLayer)
    //防抖
    const handleCenter = _.debounce((curCenter) => {
      siteServer.getAddress([curCenter.lng, curCenter.lat], function (status, result) {

        if (status == 'complete' && result.info == 'OK') {
          console.log('result', result, status)
          const address = result.regeocode.formattedAddress.replace('河北省保定市', '')
          nowLayer.setContent(`<div class="posi" >${address}</div>`)
          nowLayer.setPosition(curCenter)
        }
      })
    }, 300)
    // 监听中心点
    hwMap.on("mapmove", () => {
      const curCenter = hwMap.getCenter(); //获取中心点
      nowMark.setPosition(curCenter)
      //解码的坐标点的地理信息
      handleCenter(curCenter)
    })
    //解码
    AMap.plugin("AMap.Geocoder", () => {
      siteServer = new AMap.Geocoder({
        city: "1306",
        extensions: "base"
      })
    })


  })
})





</script>
